<%@ page import="java.net.URLDecoder" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2019/4/12
  Time: 9:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <script src="../js/jquery-1.12.3.min.js"></script>
    <style>
        #box .col-md-1 {
            width: 8.3%;
            height: 100px;
        }

        img {
            width: 80%;
        }

        a {
            font-family: Arial, '黑体', '宋体', sans-serif;
            color: #6c6c6c;
        }

        a:hover {
            text-decoration: none;
            color: skyblue;
        }

        .d1 {
            margin-left: 5px;
        }

        .text {
            width: 100px;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    </style>

    <script>
        //文件大小限制
        var fileSize = 1024*1024*20;

        var flag = true;
        function uploading(ele) {
            if(flag){
                $("#file").click();
            }else {
                $("#z").css("display","block");
                $(ele).prop("type","submit");
                console.log("上传文件");
            }
        }


        //对上传文件的大小进行判断
        function run1(ele) {
            var file = ele.files[0];

            if(file.size == 0){
                alert('文件没有内容请重新选择');
            }else if(file.size < fileSize){
                $("#span").text("开始上传");
                flag = false;
            }else{
                alert('文件过大请重新选择');
            }
            console.log(file.size);
        }


        //各种页面展示后的提示效果
        var address = "${address}";
        if(address != ""){
            alert(address);
        }




    </script>
</head>
<body style="padding-top: 20px;">
    <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 9999;display: none" id="z">
        <h3 style="line-height: 570px" align="center">正在上传文件请等待</h3>
    </div>


<%--删除 下载 提交表单位置--%>
<form action="${pageContext.request.contextPath}/file?method=upLoad"  enctype="multipart/form-data" method="post">

<div class="container-fluid">
    <div class="row" style="margin-left: 15px">
        <%--文件上传--%>
            <%--自己添加文件上传格式名--%>
            <input type="file" name="1111" style="position: absolute;top: -1000px;" id="file" onchange="run1(this)">
            <button class="btn btn-default d1" onclick="uploading(this)" type="button">
                <span class="glyphicon glyphicon-open" aria-hidden="true" style="font-size: 20px" id="span">上传文件</span>
            </button>
        <button class="btn btn-default d1">
            <a href="javascript:void (0)" onclick="return false" disabled=""><span class="glyphicon glyphicon-floppy-remove" aria-hidden="true"
                             style="font-size: 20px">删除</span></a>
        </button>
        <button class="btn btn-default d1">
            <a href="javascript:void (0)" onclick="return false" disabled=""><span class="glyphicon glyphicon-floppy-open" aria-hidden="true"
                             style="font-size: 20px">更新</span></a>
        </button>
        <button class="btn btn-default d1">
            <a href="javascript:void (0)" onclick="return false" disabled=""><span class="glyphicon glyphicon-save" aria-hidden="true" style="font-size: 20px">下载</span></a>
        </button>
    </div>

    <img src="${pageContext.request.contextPath}" alt="">
    <div><h2 align="center">${msg}</h2></div>
    <div class="row" id="box" style="margin-top: 10px">
        <div class="col-md-1"></div>
        <c:forEach items="${flieList}" var="file" varStatus="s">
            <div class="col-md-1 text-left" style="overflow: hidden" title="${file.name}">
                    <c:if test="${file.type != '5'}">
                        <a href="${pageContext.request.contextPath}/file?method=showFile&fileName=${file.fileName}&id=${file.type}">
                    </c:if>
                    <%--删除一条数据信息 在此调用下载方法--%>
                    <c:if test="${file.type == '5'}">
                        <a href="${pageContext.request.contextPath}/file?method=showFile&fileName=${file.fileName}&id=${file.type}">
                    </c:if>
                    <%
                        URLDecoder url = new URLDecoder();
                        pageContext.setAttribute("url",url);
                    %>
                    <div style="overflow: hidden ;height: 65px;position: relative" >
                        <c:if test="${file.type == '2'}">
                            <img src="${pageContext.request.contextPath}/${url.decode(file.fileName,"utf-8")}" alt=""
                                 class="img-responsive img1">
                        </c:if>
                        <c:if test="${file.type != '2'}">
                            <img src="${pageContext.request.contextPath}/img/1/${file.type}.png" alt=""
                                 class="img-responsive">
                        </c:if>
                    </div>
                    <p class="text"><input type="checkbox" name="filePath" value="${file.realPath}">${file.name}</p>
                </a>
            </div>

            <c:if test="${s.count % 10 == 0}">
                <div class="col-md-1"></div>
                <div class="col-md-1"></div>
            </c:if>
        </c:forEach>
    </div>

    <div class="footer navbar-fixed-bottom">
        <%@include file="page.jsp"%>
    </div>
</div>
</form>
</body>
</html>
